<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>{{project-name}}</title>
    <link data-trunk rel="copy-dir" href="../assets" />
    <link data-trunk rel="inline" href="style.css" />
    <link data-trunk rel="inline" type="module" href="restart-audio-context.js" />
    <link data-trunk rel="rust" data-cargo-no-default-features data-wasm-opt="s" href="../" />
</head>

<body>
    <div id="game" class="center">
        <div id="loading-screen" class="center">
            <span class="spinner"></span>
        </div>

        <canvas id="bevy">
            Javascript and canvas support is required
        </canvas>
    </div>

    <script type="module">
        // Hide loading screen when the game starts.
        const loading_screen = document.getElementById('loading-screen');
        const bevy = document.getElementById('bevy');
        const observer = new MutationObserver(() => {
            if (bevy.height > 1) {
                loading_screen.style.display = 'none';
                observer.disconnect();
            }
        });
        observer.observe(bevy, { attributeFilter: ['height'] });
    </script>
</body>

</html>
